<!--
 * @Author       : xiaoxiaoguai
 * @Date         : 2025-05-20 16:42:12
 * @LastEditors  : Please set LastEditors
 * @LastEditTime : 2025-08-21 15:45:30
 * @Description  : 
-->
<template>
	<layout class="h-100">
		<!--轻提示-->
		<view class="loadingBox" v-if="loadingValue">
			<uv-loading-page
				:loading="true"
				:loadingColor="themeColor"
				loading-mode="spinner"></uv-loading-page>
		</view>
		<view class="menuBox">
			<uv-navbar
				leftText="返回"
				bgColor="#fff"
				:height="my_navBarHeight + 'px'"
				:fixed="true"
				:placeholder="true"
				title="">
				<template v-slot:left>
					<view class="uv-nav-slot">
						<uv-icon name="home" size="21" @click="gotoIndex()" :bold="true"></uv-icon>
						<view class="inPersonClass" @click="selectInPersonNum">
							<view>{{ inPerson ? `${inPerson}人就餐` : '选择就餐人数' }}</view>
							<view style="font-size: 30rpx" class="iconfont iconarrow-right"></view>
						</view>
					</view>
				</template>
			</uv-navbar>
			<view class="navHeader">
				<view class="header">
					<view class="storeImage">
						<image
							@click="previewStoreImage"
							:src="store.image"
							style="width: 100%; height: 100%"></image>
					</view>
					<view class="left" v-if="orderType == 'takein' || orderType == 'desk'">
						<view class="store-name" @click="selectShop()">
							<text class="store-name_text">
								{{ store.name }}
							</text>
							<view style="font-size: 42rpx" class="iconfont iconarrow-right"></view>
						</view>
						<view class="store-location">
							<uv-icon name="map" color="#ccc" size="14"></uv-icon>
							<text
								v-if="!currentDeskNum"
								style="margin-left: 6rpx; font-size: 22rpx">
								距您 {{ kmUnit(store.dis) }}
							</text>
							<text v-if="currentDeskNum" style="margin-left: 6rpx; font-size: 22rpx">
								桌号 {{ currentDeskNum }}
							</text>
						</view>
					</view>
					<view class="left" v-else>
						<view class="store-name" @click="selectShop()">
							<text>
								{{ store.name }}
							</text>
							<view style="font-size: 36rpx" class="iconfont iconarrow-right"></view>
						</view>
						<view class="store-location">
							<view class="small" v-if="store.distance > 0 && orderType == 'takeout'">
								(配送距离: {{ store.distance }}km)
							</view>
							<text class="small" v-else-if="store.distance == 0">
								(本店不支持外卖)
							</text>
						</view>
					</view>
					<view class="rightClass">
						<view
							class="dinein"
							:class="{ active: orderType == 'takein' }"
							@tap="takin">
							<text>自取</text>
						</view>
						<view
							class="takeout"
							:class="{ active: orderType == 'desk' }"
							@tap="takout">
							<text>堂食</text>
						</view>
					</view>
				</view>
				<view class="tabs">
					<uv-tabs
						:scrollable="true"
						:current="currentIndex"
						:customStyle="{ marginLeft: '-20rpx' }"
						:itemStyle="{ height: '45px', padding: '0 30rpx 0 30rpx', color: '#000' }"
						:activeStyle="{
							color: '#000',
							fontSize: '30rpx',
							fontWeight: 'bold',
						}"
						lineWidth="40"
						lineHeight="4"
						:lineColor="computedLineColor"
						keyName="name"
						:list="tabList"
						@change="tabsChange"></uv-tabs>
					<view class="searchBox">
						<uv-search
							shape="round"
							:showAction="false"
							bgColor="#f5f5f5"
							inputAlign="center"
							placeholderColor="#919293"
							height="52rpx"
							disabled
							@click="toSearchPage"
							placeholder="搜索"></uv-search>
					</view>
				</view>
				<view class="storeInfo">
					<uv-notice-bar
						:bgColor="'#f5f5f5'"
						color="#999"
						@click="toStoreInfo"
						:customStyle="{ padding: '10rpx 20rpx', borderRadius: '10rpx' }"
						text="欢迎点餐，如对菜品有任何疑问，请及时联系服务员"
						mode="link"></uv-notice-bar>
				</view>
			</view>
			<scroll-view
				scroll-y
				v-if="!loadingValue"
				v-show="currentIndex == 0"
				:show-scrollbar="false"
				enhanced
				:scroll-into-view="scrollIntoView"
				class="main-scroll"
				:style="{
					height: `calc(100% - ${
						heightInfo.statusBarHeight + my_navBarHeight + adsHeightValue
					}px)`,
				}"
				@scroll="handleGoodsScroll">
				<view class="swiperAdsClass" :style="{ height: swiperImage + 'px' }">
					<uv-swiper
						:previousMargin="ads.length <= 2 ? 0 : 30"
						:nextMargin="ads.length <= 2 ? 0 : 30"
						circular
						bgColor="#ffffff"
						:list="ads"
						:radius="10"></uv-swiper>
				</view>
				<view class="contentClass">
					<!-- 广告 begin -->
					<view
						class="menus"
						:style="{
							height: `calc(${menuBoxHeight}px - ${
								heightInfo.statusBarHeight +
								my_navBarHeight +
								adsHeightValue +
								10 +
								saveScrollTop
							}px)`,
						}"
						:class="{ paddingBottom: cart.length > 0 }">
						<scroll-view
							scroll-y
							:show-scrollbar="false"
							style="height: 100%"
							enhanced
							:scroll-with-animation="scrollWithAnimation"
							:scroll-into-view="`menu-${currentMenuIdCopy}`">
							<view
								class="menu"
								:id="`menu-${item.id}`"
								:class="{
									current: item.id === currentMenuId,
								}"
								v-for="(item, index) in goods"
								:key="index"
								@tap="handleMenuTap(item.id, index)">
									<image v-if="item.picUrl" style="width: 60rpx; height: 60rpx;border-radius: 10rpx;margin-bottom: 8rpx;" :src="item.picUrl"></image>
									<view>{{ item.name }}</view>
								<view class="dot" v-show="menuCartNum(item.id)">
									{{ menuCartNum(item.id) }}
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="goods" :class="{ paddingBottom: cart.length > 0 }">
						<view
							class="categoryClass"
							v-for="(item, index) in goods"
							:style="{
								marginTop: index == 0 ? '0' : '0',
							}"
							:key="index"
							:id="`cate-${item.id}`">
							<view class="cate_title" :class="index == 0 ? 'cate_title_first' : ''">
								{{ item.name }}
								<!-- <image mode="aspectFill" :src="item.icon" class="icon"></image> -->
							</view>
							<!-- 商品 begin -->
							<view
								class="goodItem"
								v-for="(goodEle, key) in item.goodsList"
								:key="key">
								<goodItemCom
									:isLastGoodItem="key == item.goodsList.length - 1"
									:goodEle="goodEle"
									:goodIndex="key"
									@showGoodDetail="showGoodDetail"
									:cart="cart" />
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view
				:style="{
					height: `calc(100% - ${
						heightInfo.statusBarHeight + my_navBarHeight + adsHeightValue
					}px)`,
				}"
				v-show="currentIndex == 1"
				v-if="!loadingValue">
				<commentList :shopId="store.id" />
			</view>
		</view>

		<!-- 购物车栏 begin -->
		<cartBar :cart="cart" :currentIndex="currentIndex" ref="cartBarRef" />
		<!-- 购物车栏 end -->

		<productDetailModal
			@getCartBarInfo="getCartBarInfo"
			:cart="cart"
			ref="productDetailModalCom" />

		<selectInpersonNum @confirm="confirmNum" ref="selectInpersonNumRef" />

		<storeNameDetail ref="storeNameDetailCom" />
	</layout>
</template>

<script setup>
	import goodItemCom from './components/goodItem.vue'
	import storeNameDetail from './components/storeNameDetail.vue'
	import Socket from '@/utils/websocket'
	import cartBar from './components/cartBar.vue'
	import selectInpersonNum from './components/selectInpersonNum.vue'
	import { ref, computed, nextTick, onMounted, watch, getCurrentInstance } from 'vue'
	import { onLoad, onShow, onPullDownRefresh, onHide, onUnload } from '@dcloudio/uni-app'
	import { formatDateTime, kmUnit } from '@/utils/util'
	import { shopNearby, menuGoods, getShopByQrcode, productDetail, deskGet } from '@/api/goods'
	import { menuAds } from '@/api/market'
	import commentList from './components/commentList.vue'
	import productDetailModal from './components/productDetailModal.vue'
	import { useMainStore } from '@/store/store'
	import { storeToRefs } from 'pinia'
	const main = useMainStore()
	const { orderType, address, store, location, isLogin, themeColor } = storeToRefs(main)
	const currentIndex = ref(0)
	const tabList = ref([
		{ type: 0, name: '点菜' },
		{ type: 1, name: '评价' },
	])
	const inPerson = ref(0)
	const goods = ref([])
	const ads = ref([])
	const loadingValue = ref(true)
	const currentMenuId = ref(0)
	const currentMenuIdCopy = ref()
	const cart = ref([])
	const selectInpersonNumRef = ref(null)
	const good = ref({})
	const my_navBarHeight = ref(40)
	const heightInfo = ref({})
	const initOptions = ref({})
	const toSearchPage = () => {
		uni.setStorageSync('cart', cart.value)
		uni.navigateTo({
			url: `/pages/components/pages/searchMenu/searchMenu?shopId=${store.value.id}&shopName=${store.value.name}`,
		})
	}
	const storeNameDetailCom = ref(null)
	const toStoreInfo = () => {
		storeNameDetailCom.value.open()
	}
	const productDetailModalCom = ref(null)
	const showGoodDetail = (currenClickGood, obj) => {
		productDetailModalCom.value.init(currenClickGood, obj)
	}
	const previewStoreImage = () => {
		uni.previewImage({
			urls: [store.value.image],
			current: store.value.image,
			indicator: 'number',
			loop: true,
		})
	}
	const tabsChange = item => {
		console.log('tabsChange', item)
		currentIndex.value = item.index
	}

	const menuCartNum = computed(() => {
		return id =>
			cart.value.reduce((acc, cur) => {
				if (cur.cate_id === id) {
					return (acc += cur.number)
				}
				return acc
			}, 0)
	})
	const computedLineColor = computed(() => {
		return `linear-gradient(to right, ${themeColor.value}, #fff)`
	})
	// 监听自定义事件
	uni.$on('refreshMenu', () => {
		// 在这里执行onLoad逻辑
		console.log('选择的门店:', store.value.id)
		cart.value = []
		uni.removeStorageSync('cart')
		initOptions.value = {}
		init()
	})
	uni.$on('openLoading', () => {
		loadingValue.value = true // 执行刷新操作
	})
	const cartBarRef = ref(null)
	const getCartBarInfo = async () => {
		nextTick(async () => {
			productDetailModalCom.value.cartBarInfoCopy = await cartBarRef.value.getCartBount()
		})
	}
	const { proxy } = getCurrentInstance()
	onLoad(async options => {
		console.log(options, 'options123123')
		// 根据当前页面情况调整参数
		heightInfo.value = uni.getWindowInfo() // 有TabBar和导航栏
		await proxy.$getTenantIdByAppId()
		initOptions.value = options
		init()
		refreshCart()
	})
	// 页面卸载时关闭 WebSocket
	onUnload(() => {
		// Socket.closeSocket()
	})
	const menuShowMethod = async () => {
		const orderIdLastPage = uni.getStorageSync('currentOrderId')
		if (orderIdLastPage) {
			uni.navigateTo({
				url: '/pages/components/pages/orders/detail?id=' + orderIdLastPage,
			})
			uni.setStorageSync('currentOrderId', '')
			setTimeout(() => {
				loadingValue.value = false // 执行刷新操作
			}, 1000)
		}
		if (!inPerson.value) {
			setTimeout(() => {
				nextTick(() => {
					selectInPersonNum()
				})
			}, 500)
		}
		refreshCart()

		setTimeout(() => {
			// sendTestMessage(1)
		}, 500)
	}
	onShow(() => {})
	watch(
		() => main.multiPersonOrderingCart, // 监听对象
		(newVal, oldVal) => {
			console.log('goods 发生变化', newVal, oldVal)
			if (newVal && newVal.content) {
				let cartFromSocket = JSON.parse(newVal.content) || []
				uni.setStorageSync('cart', cartFromSocket)
				refreshCart()
			}
		},
		{
			deep: true, // 深度监听
			// immediate: true // 立即执行
		}
	)
	const selectInPersonNum = () => {
		selectInpersonNumRef.value.open(inPerson.value)
	}
	const selectShop = () => {
		uni.navigateTo({
			url: '/pages/components/pages/shop/shop',
		})
	}
	const gotoIndex = () => {
		uni.switchTab({
			url: '/pages/home/index',
		})
	}
	// 通用解析 scene 参数函数
	function parseScene(scene) {
		if (!scene) return {}

		// 先解码
		const decodedScene = decodeURIComponent(scene)

		// 分割并转成对象
		const params = {}
		decodedScene.split('&').forEach(pair => {
			const [key, value] = pair.split('=')
			if (key) params[key] = value
		})

		return params
	}
	// 发送一条测试消息
	function sendTestMessage(isFirst) {
		// 1.1 先 JSON 化 message 消息内容
		const messageContent = JSON.stringify({
			text: '用户操作了点单购物车',
			toUserId: '',
			shopId: newParams.value.shopId,
			deskId: newParams.value.deskId,
			cart: cart.value,
			isFirst,
		})
		// 1.2 再 JSON 化整个消息
		const jsonMessage = JSON.stringify({
			type: 'multi-person-ordering',
			content: messageContent,
		})
		console.log('我有发送了一条小心')

		Socket.sendMsg(jsonMessage)
	}
	const newParams = ref({})
	const currentDeskNum = ref('')
	const init = async () => {
		//页面初始化
		currentIndex.value = 0
		loadingValue.value = true
		currentDeskNum.value = ''
		if (initOptions.value.scene) {
			// newParams.value = {
			// 	deskId:'14',
			// 	shopId: '2'
			// }
			newParams.value = parseScene(initOptions.value.scene)
			console.log(newParams.value, 'newParams.value')
			const deskObj = await deskGet({
				id: newParams.value.deskId,
			})
			console.log(deskObj)
			console.log(deskObj)
			console.log(deskObj)
			main.SET_ORDER_TYPE('desk')
			currentDeskNum.value = deskObj.number
			const res = await getShopByQrcode({
				shop_id: newParams.value.shopId,
			})
			// 掉接口
			if (res) {
				operateShop(res)
			}
			// Socket.initSocket()
			return
		}

		let result = location.value
		console.log('result:', result)
		if (!location.value.hasOwnProperty('latitude')) {
			console.log('result1:', location.value)
			uni.getLocation({
				type: 'wgs84',
				success: function (res) {
					console.log('location1:', res)

					result = {
						latitude: res.latitude,
						longitude: res.longitude,
					}
					getShopList(result)
				},
				fail: function (res) {
					uni.showToast({
						title: '获取位置失败，请检查是否开启相关权限',
						duration: 2000,
						icon: 'error',
					})
					// 默认地为你为北京地址
					result = {
						latitude: 39.91999,
						longitude: 116.45627,
					}
					getShopList(result)
				},
				complete: function (res) {},
			})
			return
		}

		getShopList(result)
	}
	const getShopList = async res => {
		console.log('location9:', res)
		if (res) {
			main.SET_LOCATION(res)

			let shop_id = 0
			if (store.value.id) {
				shop_id = store.value.id
			}

			let shop = await shopNearby({
				lat: res.latitude,
				lng: res.longitude,
				shop_id: shop_id,
				kw: '',
			})
			if (shop) {
				operateShop(shop)
			}
		}
	}
	const operateShop = async shop => {
		//广告图
		await getAds(shop)

		shop.notice =
			shop.status == 1
				? shop.notice
				: '店铺营业时间为:' +
				  formatDateTime(shop.startTime, 'hh:mm') +
				  ' - ' +
				  formatDateTime(shop.endTime, 'hh:mm') +
				  '，不在营业时间内无法下单'
		// 设置店铺信息
		main.SET_STORE(shop)
		let mygoods = await menuGoods({
			shopId: shop.id,
		})
		if (mygoods) {
			goods.value = mygoods || []
			refreshCart()
		}
		let firstGoodId = goods.value && goods.value[0] && goods.value[0].id
		scrollIntoView.value = ''
		currentMenuIdCopy.value = ''
		currentMenuId.value = firstGoodId
		setTimeout(() => {
			loadingValue.value = false
			nextTick(() => {
				calcSize()
			})
		}, 100)
	}
	const refreshCart = () => {
		if (goods.value && goods.value.length > 0) {
			let newGoods = goods.value
			cart.value = []
			let newCart = uni.getStorageSync('cart') || []
			let tmpCart = []
			if (newCart) {
				for (let i in newCart) {
					for (let ii in newGoods) {
						for (let iii in newGoods[ii].goodsList) {
							if (newCart[i].id == newGoods[ii].goodsList[iii].id) {
								tmpCart.push(newCart[i])
							}
						}
					}
				}
				cart.value = tmpCart
			}
		}
	}
	const getAds = async shop => {
		ads.value = shop.images || []
	}
	const takout = () => {
		if (orderType.value == 'desk') return
		// sendTestMessage()
		main.SET_ORDER_TYPE('desk')
	}
	const takin = () => {
		if (orderType.value == 'takein') return
		// sendTestMessage()
		main.SET_ORDER_TYPE('takein')
	}
	const scrollIntoView = ref('')
	const scrollWithAnimation = ref(false)
	const dynamicHeight = computed(() => {
		return (
			menuBoxHeight.value -
			heightInfo.value.statusBarHeight -
			my_navBarHeight.value -
			adsHeightValue.value -
			10 -
			saveScrollTop.value
		)
	})
	const menuScroll = index => {
		if (index > visibleNum.value && index < goods.value.length - visibleNum.value) {
			currentMenuIdCopy.value = goods.value[index - visibleNum.value].id
		} else if (index >= goods.value.length - visibleNum.value) {
			currentMenuIdCopy.value = goods.value[goods.value.length - 1].id
		} else {
			currentMenuIdCopy.value = goods.value[0].id
		}
	}
	const handleMenuTap = (id, index) => {
		scrollWithAnimation.value = true
		console.log('动画开启了吗', scrollWithAnimation.value, id)
		scrollIntoView.value = ''
		setTimeout(() => {
			scrollIntoView.value = 'cate-' + id
			// currentMenuId.value = id
		}, 0)
		setTimeout(() => {
			menuScroll(index)
		}, 250)
		setTimeout(() => {
			scrollWithAnimation.value = false
		}, 300)
	}
	const cateRects = ref([])
	const swiperImage = ref(160)
	const saveScrollTop = ref(swiperImage.value)
	const visibleNum = ref(3)
	const handleGoodsScroll = e => {
		const scrollTop = e.detail.scrollTop
		if (scrollTop <= swiperImage.value) {
			saveScrollTop.value = swiperImage.value - scrollTop
		} else {
			saveScrollTop.value = 0
		}
		console.log(saveScrollTop, 'sav222eScrollTop')
		console.log(scrollTop, 'scrollTop')
		const stickyOffset = cateTitleHeight.value // 吸顶的高度阈值，按你组件实际高度调整
		// 倒序查找当前处于吸顶状态的分类
		for (let i = cateRects.value.length - 1; i >= 0; i--) {
			const itemTop = cateRects.value[i].top
			if (scrollTop + stickyOffset >= itemTop) {
				console.log('啥时候会啊')
				console.log('啥时候会啊', cateRects.value[i].id)
				let id = parseInt(cateRects.value[i].id)
				if (currentMenuId.value !== id) {
					currentMenuId.value = id
					// 关键：让左侧菜单也跟随滚动
					const index = goods.value.findIndex(g => g.id == id)
					menuScroll(index)
				}
				break
			}
		}
	}
	function getDomClassHeight(className) {
		return new Promise(resolve => {
			// const page = getCurrentPages().slice(-1)[0]
			uni.createSelectorQuery()
				.in(proxy)
				.select(`.${className}`)
				.fields({ size: true }, data => {
					if (data) {
						resolve(data.height)
					} else {
						resolve(0) // 没取到就默认 0
					}
				})
				.exec()
		})
	}
	// 初始化时测量菜单高度
	// const getMenuRects = () => {
	// 	return new Promise(resolve => {
	// 		uni.createSelectorQuery()
	// 			.in(proxy)
	// 			.selectAll('.menu')
	// 			.boundingClientRect(rects => {
	// 				menuRects.value = rects.map((rect, i) => ({
	// 					index: i,
	// 					top: rect.height * (i + 1),
	// 					height: rect.height,
	// 				}))
	// 				resolve()
	// 			})
	// 			.exec()
	// 	})
	// }
	const adsHeightValue = ref(100)
	const menuBoxHeight = ref(0)
	const cateTitleHeight = ref(0)
	const calcSize = async () => {
		adsHeightValue.value = await getDomClassHeight('navHeader')
		menuBoxHeight.value = await getDomClassHeight('menuBox')
		cateTitleHeight.value = await getDomClassHeight('cate_title_first') // 获取分类标题，默认 52
		console.log('menuBoxHeight:', menuBoxHeight.value)
		const page = getCurrentPages().slice(-1)[0]
		uni.createSelectorQuery()
			.in(proxy)
			.selectAll('.categoryClass')
			.boundingClientRect(res => {
				console.log(res, 'res')
				cateRects.value = res.map(item => {
					console.log(
						item.top -
							adsHeightValue.value -
							heightInfo.value.statusBarHeight -
							my_navBarHeight.value -
							cateTitleHeight.value
					)
					return {
						id: item.id.replace('cate-', ''),
						top:
							item.top -
							adsHeightValue.value -
							heightInfo.value.statusBarHeight -
							my_navBarHeight.value, // 减去导航栏高度
					}
				})
				console.log(cateRects.value, 'cateRects')
			})
			.exec()
	}

	const confirmNum = num => {
		// 确认就餐人数
		inPerson.value = num
		uni.setStorageSync('deskPeople', inPerson.value)
	}
	defineExpose({
		menuShowMethod,
	})
</script>

<style lang="scss" scoped>
	.uv-nav-slot {
		margin-left: -10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 3px 7px;
		opacity: 1;
		.inPersonClass {
			display: flex;
			align-items: center;
			font-size: 22rpx;
			color: #999;
			margin-top: 8rpx;
			margin-left: 25rpx;
		}
	}
	.main-scroll {
		background-color: #f5f5f5;
	}

	.swiperAdsClass {
		padding: 0 20rpx 20rpx 20rpx;
		background-color: #fff;
	}
	.navHeader {
		width: 100%;
		// height: 180rpx;
		padding: 10rpx 20rpx 0 20rpx;
		display: flex;
		background-color: #fff;
		flex-direction: column;
		.header {
			flex: 1;
			overflow: hidden;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.storeImage {
				width: 90rpx;
				height: 90rpx;
				border-radius: 14rpx;
				overflow: hidden;
				background-color: #f5f5f5;
			}
			.left {
				flex: 1;
				overflow: hidden;
				margin-left: 20rpx;
				height: 90rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.store-name {
					display: flex;
					align-items: center;
					font-size: 34rpx;
					// line-height: 1;
					margin-bottom: auto;
					.store-name_text {
						font-weight: bold;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					.small {
						font-size: $font-size-sm;
						color: $text-color-assist;
					}
					.iconfont {
						margin-left: 10rpx;
						line-height: 100%;
					}
				}

				.store-location {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					color: $text-color-assist;
					font-size: $font-size-sm;
					.iconfont {
						vertical-align: middle;
						display: table-cell;
						color: $qingzhen-btn-primary-color;
						line-height: 100%;
					}
				}
			}
		}
		.tabs {
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.searchBox {
				width: 166rpx;
			}
		}
		.storeInfo {
			margin-top: 10rpx;
			padding-bottom: 20rpx;
		}
	}

	.contentClass {
		display: flex;
		flex-direction: row;
		border-top: 2rpx solid #f0f0f0;
		background-color: #f5f5f5;
		.paddingBottom {
			padding-bottom: 120rpx;
		}
		.menus {
			width: 170rpx;
			position: sticky;
			top: 0;
			z-index: 88;
			overflow: hidden;
			overflow: auto;
			position: sticky;
			background-color: $bg-color-grey;
			padding-left: 8rpx;
			&::-webkit-scrollbar {
				display: none;
			}
			.menu {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				padding: 26rpx 14rpx 26rpx 6rpx;
				font-size: 26rpx;
				color: #666666;
				text-align: center;
				position: relative;
				&.current {
					background-color: #ffffff;
					color: #000;
					border-radius: 20rpx 0 0 20rpx;
					font-weight: bold;
					&:first-child {
						border-radius: 0 0 0 20rpx;
					}
					&::after {
						content: '';
						position: absolute;
						right: 0;
						bottom: -20rpx;
						width: 20rpx;
						height: 20rpx;
						background: radial-gradient(circle at 0 100%, transparent 20rpx, #fff 0);
					}
					&::before {
						content: '';
						position: absolute;
						top: -20rpx;
						right: 0;
						width: 20rpx;
						height: 20rpx;
						background: radial-gradient(circle at 0% 0%, transparent 20rpx, #fff 0);
					}
				}

				.dot {
					position: absolute;
					width: 34rpx;
					height: 34rpx;
					line-height: 34rpx;
					font-size: 22rpx;
					background-color: $qingzhen-btn-primary-color;
					//background-color: #5A5B5C;
					color: #ffffff;
					top: 10rpx;
					right: 10rpx;
					border-radius: 100%;
					text-align: center;
				}
			}
			.menu:last-child {
				margin-bottom: 200rpx;
			}
		}
		.goods {
			flex: 1;
			background-color: #ffffff;
			.ads {
				height: calc(300 / 550 * 510rpx);

				image {
					width: 100%;
					height: 100%;
					border-radius: 8rpx;
				}
			}

			.categoryClass {
				background-color: #fff;
				padding: 0 20rpx;
				width: 100%;
				.cate_title {
					font-size: 28rpx;
					position: sticky;
					top: -1rpx;
					z-index: 5;
					margin-left: -1px;
					width: calc(100% + 2px);
					background-color: #fff;
					display: flex;
					align-items: center;
					color: $text-color-base;
					color: #666;
					padding: 26rpx 0;
					.icon {
						width: 38rpx;
						height: 38rpx;
						margin-left: 10rpx;
					}
				}
				&:last-child {
					margin-bottom: 20rpx;
				}
			}
		}
	}

	.rightClass {
		background-color: $bg-color-grey;
		border-radius: 38rpx;
		display: flex;
		align-items: center;
		font-size: $font-size-sm;
		color: $text-color-assist;
		.dinein,
		.takeout {
			position: relative;
			display: flex;
			align-items: center;
			padding: 10rpx 20rpx;
			&.active {
				color: #ffffff;
				background-color: $qingzhen-btn-primary-color;
				border-radius: 38rpx;
			}
		}
	}

	.menuBox {
		// height: 100vh;
		height: 100%;
		background-color: #f5f5f5;
	}
</style>
